<template>
	<!-- 推广中心 -->
	<view class="spread">
		<view class="preBookMain">
			<view class="preBook-content" v-for="(item,index) in prebookList" :key="index">
				<!-- 图片 -->
				<view class="preBookImgArr">
					<view class="prebookImg" v-for="(i,k) in item.imgArr" :key="k"
						:class="item.imgArr.length==1?'img1':item.imgArr.length==2||item.imgArr.length==4?'img2':item.imgArr.length>=3?'img3':''">
						<image :src="i" mode="aspectFill"></image>
					</view>
				</view>
				<view class="preBook-clerk">{{item.text}}</view>
				<view class="preBook-userinfo">
					<view class="preBook-avatarImg">
						<image src="../../static/images/list/goodsList/chuifengji.jpg" mode=""></image>
					</view>
					<view class="preBook-nickName">nickName</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				prebookList: [{
						id: 0,
						imgArr: [
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/873c3dca662e8cde7153f7c4fc351a65.jpg",
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/71a799a1bbf7df24a33f594e72580d19.jpg",
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/833611ecda37667b194e6ae51322fa7d.jpg",
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/ac2a2dc81b3573bf403891775207963b.jpg"
						], //图片
						text: "啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊", //描述/文案
						avatar: "", //头像
						nickName: "", //昵称
						pushTime: "", //时间
						phone: "", //手机号
					},
					{
						id: 1,
						imgArr: [
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/873c3dca662e8cde7153f7c4fc351a65.jpg",
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/71a799a1bbf7df24a33f594e72580d19.jpg",
							"https://huishou.68699.cn/attachment/images/2/uploads/20240302/833611ecda37667b194e6ae51322fa7d.jpg",
						], //图片
						text: "", //描述/文案
						avatar: "", //头像
						nickName: "", //昵称
						pushTime: "", //时间
						phone: "", //手机号
					}
				], //数据
			};
		}
	}
</script>

<style lang="scss" scoped>
	.preBookMain {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.preBook-content {
			background: #fff;
			width: 49%;
			margin-top: 20rpx;
			// remove fixed height
			height: auto;
			display: flex;
			flex-direction: column;
			
			.preBookImgArr {
				// border: 1px solid #f00;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.prebookImg {
					// border: 1px solid #000;
					// width: 100%;
				}
				.img1 {
					width: 100%;
					height: 300rpx;
				}

				.img2 {
					width: 48%;
					height: 180rpx;
				}

				.img3 {
					width: 31%;
					height: 110rpx;
				}
				image {
					margin-top: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.preBook-clerk {
				padding: 0 20rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				/* 设置最大显示行数 */
				-webkit-line-clamp: 3;
			}

			.preBook-userinfo {
				display: flex;
				align-items: center;
				// margin-top: 10rpx;
				padding:20rpx;
				box-sizing: border-box;
				.preBook-avatarImg {
					width: 60rpx;
					height: 60rpx;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>